<template>
    <div>
        <div style='margin-bottom: 20px;'>
            <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState"
                @finish="onFinish">
                <a-row :gutter="24">
                    <template v-for="i, index in formCo" :key="i">
                        <a-col v-show="expand || index < 6" :span="8">
                            <a-form-item name="date_time" label="订单时间范围" v-if="i.dataIndex == 'date_time'">
                                <a-range-picker v-model:value="formState['date']" show-time format="YYYY-MM-DD HH:mm:ss"
                                    value-format="YYYY-MM-DD HH:mm:ss" />
                            </a-form-item>
                            <a-form-item name="state" label="类型" v-else-if="i.dataIndex == 'state'">
                                <a-radio-group v-model:value="formState['state']">
                                    <a-radio-button value="">全部</a-radio-button>
                                    <a-radio-button value="0">待支付</a-radio-button>
                                    <a-radio-button value="1">待接单</a-radio-button>
                                    <a-radio-button value="2">已接单</a-radio-button>
                                    <a-radio-button value="3">已出发</a-radio-button>
                                    <a-radio-button value="4">达到目的地</a-radio-button>
                                    <a-radio-button value="5">开始服务</a-radio-button>
                                    <a-radio-button value="6">服务完成</a-radio-button>
                                    <a-radio-button value="90">取消订单</a-radio-button>
                                    <a-radio-button value="100">订单超时</a-radio-button>
                                </a-radio-group>
                            </a-form-item>
                            <a-form-item name="nickname" label="用户昵称" v-else-if="i.dataIndex == 'nickname'">
                                <a-input v-model:value="formState['usernickname']" :placeholder="'请输入'"></a-input>
                            </a-form-item>
                            <a-form-item name="address_name" label="用户名称" v-else-if="i.dataIndex == 'address_name'">
                                <a-input v-model:value="formState['username']" :placeholder="'请输入'"></a-input>
                            </a-form-item>
                            <a-form-item name="user_phone" label="用户手机号" v-else-if="i.dataIndex == 'user_phone'">
                                <a-input v-model:value="formState['userphone']" :placeholder="'请输入'"></a-input>
                            </a-form-item>
                            <a-form-item name="name" label="技师名称" v-else-if="i.dataIndex == 'name'">
                                <a-input v-model:value="formState['techname']" :placeholder="'请输入'"></a-input>
                            </a-form-item>
                            <a-form-item name="tech_phone" label="技师手机号" v-else-if="i.dataIndex == 'tech_phone'">
                                <a-input v-model:value="formState['techphone']" :placeholder="'请输入'"></a-input>
                            </a-form-item>
                            <template v-else></template>
                        </a-col>
                    </template>
                </a-row>
                <a-row>
                    <a-col :span="24" style="text-align: right">
                        <a-button type="primary" html-type="submit">查询</a-button>
                        <a-button style="margin: 0 8px"
                            @click="() => { formRef.resetFields(); onFinish(true) }">重置</a-button>
                        <a style="font-size: 12px" @click="expand = !expand" v-show="columns.length - 1 > 6">
                            <template v-if="expand">
                                <UpOutlined />
                            </template>
                            <template v-else>
                                <DownOutlined />
                            </template>
                            <span v-show="columns.length - 1 > 6"> 更多</span>
                        </a>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <!-- 订单列表 -->
        <a-table :columns="columns" :data-source="data" :scroll="{ y: 800 }"
            :pagination="{ current, pageSize, total: totalCount }" @change="pageClick"
            :customRow="record => { return { onClick: () => handleRowClick(record) } }">
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex == 'state'">
                    <div style="color:#C1A1FF">
                        <span>{{ share.getOrderState(record.state) }}</span>
                    </div>
                </template>
                <template v-if="column.dataIndex == 'duration'">
                    <span>{{ (record.duration - 0) + (record.add_clock - 0) }}</span>
                </template>
            </template>
        </a-table>
        <!-- 订单详情 -->
        <a-modal v-model:visible="ordergMoal" title="订单详情" :width="1170" @cancel="ordergCancel"
            style="overflow: auto;padding-left: 20px;box-sizing: border-box;" :cancelButtonProps="{ type: 'danger' }">
            <template #footer>
                <a-button type="primary" @click="ordergCancel">确定</a-button>
            </template>
            <div class="orderBox">
                <div class="flexs">
                    <!-- 买家信息 -->
                    <div class="mode">
                        <div class="title">
                            <div class="f"></div>
                            <div class="text">买家信息</div>
                        </div>
                        <p style="width: 100%;">
                            <span class="name">买家昵称:</span>
                            <span class="value">{{ orderData.data.nickname }}</span>
                        </p>
                        <p>
                            <span class="name">买家电话:</span>
                            <span class="value">{{ orderData.data.mai_phone }}</span>
                        </p>
                    </div>
                    <!-- 技师信息 -->
                    <div class="mode">
                        <div class="title">
                            <div class="f"></div>
                            <div class="text">技师信息</div>
                        </div>
                        <p style="width: 100%;">
                            <span class="name">技师名称:</span>
                            <span class="value">{{ orderData.data.name }}</span>
                        </p>
                        <p>
                            <span class="name">技师电话:</span>
                            <span class="value">{{ orderData.data.tech_phone }}</span>
                        </p>
                    </div>
                    <!-- 订单流程 -->
                    <div class="mode" v-if="orderData.data.dd_state > 1 && orderData.data.dd_state > 1 != 90">
                        <div class="title">
                            <div class="f"></div>
                            <div class="text">订单流程</div>
                        </div>
                        <p style="width: 33%;" v-if="orderData.data.dd_state > 1 && orderData.data.dd_state != 90">
                            <span class="name">接单时间:</span>
                            <span class="value" style="color:#000">{{ orderData.data.connect_time }}</span>
                        </p>
                        <p style="width: 33%;" v-if="orderData.data.dd_state > 2 && orderData.data.dd_state != 90">
                            <span class="name">出发时间:</span>
                            <span class="value" style="color:#000">{{ orderData.data.set_time }}</span>
                        </p>
                        <p style="width: 33%;" v-if="orderData.data.dd_state > 3 && orderData.data.dd_state != 90">
                            <span class="name">达到时间:</span>
                            <span class="value" style="color:#000">{{ orderData.data.arrival_time }}</span>
                        </p>
                        <p style="width: 33%;" v-if="orderData.data.dd_state > 3 && orderData.data.dd_state != 90">
                            <span class="name">打卡时间:</span>
                            <span class="value" style="color:#000">{{ orderData.data.cockin_time }}</span>
                        </p>
                        <p style="width: 33%;" v-if="orderData.data.dd_state > 3 && orderData.data.dd_state != 90">
                            <span class="name">打卡经纬度:</span>
                            <span class="value" style="color:#7ABFFF;cursor: pointer;"
                                @click="maps(orderData.data.start_longitude, orderData.data.start_latitude)">{{
                                    orderData.data.start_longitude }}</span>
                            <span class="value" style="color:#7ABFFF;cursor: pointer;"
                                @click="maps(orderData.data.start_longitude, orderData.data.start_latitude)">{{
                                    orderData.data.start_latitude }}</span>
                        </p>

                        <p style="width: 33%;" v-if="orderData.data.dd_state > 3 && orderData.data.dd_state != 90">
                            <span class="name">打卡图片:</span>
                            <img width="150" height="150"
                                :src="share.http + `/${orderData.data.start_dir}/${orderData.data.start_image}`" alt="">
                        </p>
                        <p style="width: 33%;" v-if="orderData.data.dd_state > 4 && orderData.data.dd_state != 90">
                            <span class="name">开始时间:</span>
                            <span class="value" style="color:#000">{{ orderData.data.start_time }}</span>
                        </p>
                        <p style="width: 33%;" v-if="orderData.data.dd_state > 4 && orderData.data.dd_state != 90">
                            <span class="name">预计结束还有:</span>
                            <span class="value" style="color:#000"
                                v-if="share.calculateRemainingSeconds(orderData.data.start_time, orderData.data.dd_duration, orderData.data.dd_add_clock) < 0">
                                订单已结束
                            </span>
                            <span class="value" style="color:#000" v-else >
                                {{ Math.floor(share.calculateRemainingSeconds(orderData.data.start_time,
                                    orderData.data.dd_duration, orderData.data.dd_add_clock) / 60) }}分钟
                            </span>
                        </p>
                        <p style="width: 33%;" v-if="orderData.data.dd_state > 5 && orderData.data.dd_state != 90">
                            <span class="name">完成时间:</span>
                            <span class="value" style="color:#000">{{ orderData.data.complete }}</span>
                        </p>
                        <p style="width: 33%;" v-if="orderData.data.dd_state > 5 && orderData.data.dd_state != 90">
                            <span class="name">最后结算:</span>
                            <span class="value" style="color:#000" v-if="orderData.data.advance == 0">正常到时间</span>
                            <span class="value" style="color:#000" v-if="orderData.data.advance == 1">客户提前结算</span>
                        </p>
                    </div>
                    
                    <!-- 订单信息 -->
                    <div class="mode">
                        <div class="title">
                            <div class="f"></div>
                            <div class="text">订单信息</div>
                        </div>
                        <p style="width: 33%;">
                            <span class="name">订单金额:</span>
                            <span class="value" style="color:#000">{{ orderData.data.dd_total }}</span>
                            <span class="value">(元)</span>
                        </p>
                        <p>
                            <span class="name">订单编号:</span>
                            <span class="value" style="color:#000">{{ orderData.data.uid }}</span>
                        </p>
                        <p style="width: 33%;">
                            <span class="name">下单时间:</span>
                            <span class="value">{{ orderData.data.dd_date_time }}</span>
                        </p>
                        <p style="width: 33%;">
                            <span class="name">订单状态:</span>

                            <span class="value" style="color:#C1A1FF" >{{share.getOrderState(orderData.data.dd_state)}}</span>
                        </p>
                        <p style="width: 33%;">
                            <span class="name">支付方式:</span>
                            <span class="value" style="color:#5BC4FF"
                                v-if="orderData.data.op_provider == 'alipay'">支付宝</span>
                            <span class="value" style="color:#36F36B "
                                v-if="orderData.data.op_provider == 'wxpay'">微信</span>
                            <span class="value" style="color:#FFCC68 "
                                v-if="orderData.data.op_provider == 'balance'">余额</span>
                        </p>
                    </div>
                    <!-- 服务地址 -->
                    <div class="mode">
                        <div class="title">
                            <div class="f"></div>
                            <div class="text">服务地址</div>
                        </div>
                        <p style="width: 33%;">
                            <span class="name">姓名:</span>
                            <span class="value" style="color:#000">{{ orderData.data.address_name }}</span>
                        </p>
                        <p>
                            <span class="name">经纬度:</span>
                            <span class="value" style="color:#7ABFFF;cursor: pointer;"
                                @click="maps(orderData.data.address_longitude, orderData.data.address_latitude)">{{
                                    orderData.data.address_longitude }}</span>
                            <span class="value" style="color:#7ABFFF;cursor: pointer;"
                                @click="maps(orderData.data.address_longitude, orderData.data.address_latitude)">{{
                                    orderData.data.address_latitude }}</span>
                        </p>
                        <p style="width: 33%;">
                            <span class="name">地区:</span>
                            <span class="value">{{ jwData.pro }}</span>
                        </p>
                        <p style="width: 33%;">
                            <span class="name">联系电话:</span>
                            <span class="value">{{ orderData.data.user_phone }}</span>
                        </p>
                        <p style="width: 33%;">
                            <span class="name">详细地址:</span>
                            <span class="value">{{ orderData.data.address_address }}</span>
                        </p>
                    </div>
                    <!-- 支付信息 -->
                    <div class="mode">
                        <div class="title">
                            <div class="f"></div>
                            <div class="text">支付信息</div>
                        </div>
                        <p style="width: 33%;">
                            <span class="name">实际订单金额:</span>
                            <span class="value" style="color:#000">{{ orderData.data.total_amount }}</span>
                        </p>
                        <p style="width: 33%;">
                            <span class="name">订单结算时间:</span>
                            <span class="value" style="color:#000">{{ orderData.data.op_gmt_close }}</span>
                        </p>

                        <p style="width: 33%;">
                            <span class="name">买家账户:</span>
                            <span class="value">{{ orderData.data.op_buyer_logon_id }}</span>
                        </p>
                        <p style="width: 33%;">
                            <span class="name">付款时间:</span>
                            <span class="value">{{ orderData.data.op_gmt_payment }}</span>
                        </p>
                        <p style="width: 33%;">
                            <span class="name">交易状态:</span>
                            <span class="value">{{ orderData.data.op_trade_status }}</span>
                        </p>
                        <p style="width: 33%;">
                            <span class="name">收款方账户:</span>
                            <span class="value">{{ orderData.data.op_seller_email }}</span>
                        </p>
                        <p style="width: 33%;">
                            <span class="name">退款金额:</span>
                            <span class="value" style="color:#000">{{ orderData.data.op_refund_fee }}</span>
                        </p>
                        <p style="width: 33%;">
                            <span class="name">退款时间:</span>
                            <span class="value" style="color:#000">{{ orderData.data.op_gmt_refund }}</span>
                        </p>
                    </div>
                    <!-- 订单费用 -->
                    <div class="mode dd">
                        <div class="title">
                            <div class="f"></div>
                            <div class="text">订单费用</div>
                        </div>
                        <p style="width: 16%;">
                            <span class="name">项目总价:</span>
                            <span v style="color: #A87CFF;font-size: 24px;">{{ orderData.data.dd_total }}</span>
                        </p>
                        <p style="width: 16%;">
                            <span class="name">交通费用:</span>
                            <span class='value' style="color: #A87CFF;font-size: 24px;">{{ orderData.data.ot_fare }}</span>
                        </p>
                        <p style="width: 16%;">
                            <span class="name">优惠卷费用:</span>
                            <span class='value' style="color: #A87CFF;font-size: 24px;">{{ orderData.data.dd_preferential
                            }}</span>
                        </p>
                        <p style="width: 16%;">
                            <span class="name">技师抽成:</span>
                            <span class='value' style="color: #A87CFF;font-size: 24px;">{{ orderData.data.dd_total }}</span>
                        </p>
                        <p style="width: 16%;">
                            <span class="name">代理抽成:</span>
                            <span class='value' style="color: #A87CFF;font-size: 24px;">{{ orderData.data.dd_total }}</span>
                        </p>
                    </div>
                    <!-- 交通信息 -->
                    <div class="mode jt">
                        <div class="title">
                            <div class="f"></div>
                            <div class="text">交通信息</div>
                        </div>
                        <p style="width: 356px;color: #A87CFF;">
                        <div>
                            <span>{{ orderData.data.ot_traffic_name }}</span>
                            <span style="margin-left: 20px;">全程(km)</span>
                            <span style="margin-left: 8px;">{{ orderData.data.ot_mileage }}</span>
                        </div>
                        <div style="margin-top: 31px;font-size: 24px;">
                            <span style="margin-right: 30px;">{{ jwData.trave_start }}</span>
                            <swap-right-outlined :width="100" />
                            <span style="margin-left: 30px;">{{ jwData.trave_end }}</span>
                        </div>
                        <div style="display: flex;justify-content: space-between;font-size: 14px;">
                            <div>
                                <span>{{ orderData.data.ot_target_longitude }}</span>
                                <span style="margin-left: 10px;">{{ orderData.data.ot_start_latitude }}</span>
                            </div>
                            <div>
                                <span>{{ orderData.data.ot_target_longitude }}</span>
                                <span style="margin-left: 10px;">{{ orderData.data.ot_start_latitude }}</span>
                            </div>
                        </div>
                        </p>
                        <p style="color:#66E88B;padding:20px 49px 7px 20px">
                        <div style="font-size: 16px;">免费公里数</div>
                        <div style="text-align: right;font-size: 32px;">{{ orderData.data.ot_start_free }}</div>
                        <div style="font-size: 16px;">起步价</div>
                        <div style="text-align: right;font-size: 32px;">{{ orderData.data.ot_day_start }}</div>
                        </p>
                        <p style="color:#FFC24C;padding:20px 49px 7px 20px">
                        <div style="font-size: 16px;">单程费用(元)</div>
                        <div style="text-align: right;font-size: 32px;">{{ orderData.data.ot_fare }}</div>
                        <div style="font-size: 16px;">来回费用(元)</div>
                        <div style="text-align: right;font-size: 32px;">{{ orderData.data.ot_two_fare }}</div>
                        </p>
                        <p style="color:#FFC24C;padding:20px 49px 7px 20px">
                        <div style="font-size: 16px;">出行费用</div>
                        <div style="text-align: center;font-size: 32px;margin-top: 20px;">{{ orderData.data.ot_fare }}</div>
                        </p>

                        <div>

                        </div>
                    </div>
                    <!-- 服务信息 -->
                    <div class="mode">
                        <div class="title">
                            <div class="f"></div>
                            <div class="text">服务信息</div>
                        </div>
                        <a-table :columns="fwColumns" :data-source="orderData.pro" style="width: 100%;"
                            :scroll="{ y: 240 }">
                            <template #bodyCell="{ column, record }">
                                <template v-if="column.dataIndex == 'illustrate'">
                                    <a-tag color="purple" v-for="item in record.illustrate?.split('|')">{{ item }}</a-tag>
                                </template>

                            </template>
                        </a-table>
                    </div>
                    <!-- 加钟信息 -->
                    <div class="mode">
                        <div class="title">
                            <div class="f"></div>
                            <div class="text">加钟信息</div>
                        </div>
                        <a-table :columns="jzColumns" :data-source="orderData.clock" style="width: 100%;"
                            :scroll="{ y: 340 }">
                            <template #bodyCell="{ column, record }">
                                <template v-if="column.dataIndex == 'clock_state'">
                                        <span v-if="record.clock_state == 0" style="color: red;">未支付</span>
                                        <span v-if="record.clock_state == 1" style="color: green;">已支付</span>
                                </template>
                                <template v-if="column.dataIndex == 'image'">
                                    <a-image :width="100"
                                        :src="share.http + `/${record.dir}/${orderData.data.technician_uid}/${record.image}`" />
                                </template>
                            </template>
                        </a-table>
                    </div>
                    <!-- 报备信息 -->
                    <div class="mode">
                        <div class="title">
                            <div class="f"></div>
                            <div class="text">技师报备信息</div>
                        </div>
                        <a-table :columns="reColumns" :data-source="orderData.reporting" style="width: 100%;"
                            :scroll="{ y: 240 }">
                            <template #bodyCell="{ column, record }">
                                <template v-if="column.dataIndex == 'orderg_state'">
                                    <div style="color:#C1A1FF">
                                        <span>{{ share.getOrderState(record.orderg_state) }}</span>
                                    </div>
                                </template>
                                <template v-if="column.dataIndex == 'image'">
                                    <a-image :width="100"
                                        :src="share.http + `/${record.dir}/${orderData.data.technician_uid}/${record.image}`" />
                                </template>
                            </template>
                        </a-table>
                    </div>
                </div>
            </div>
        </a-modal>
        <!-- 地图 -->
        <a-modal v-model:visible="mapShow" :width="1170" @cancel="mapCancel"
            style="overflow: auto;padding-left: 20px;box-sizing: border-box;" :cancelButtonProps="{ type: 'danger' }">
            <template #footer>
                <a-button type="primary" @click="mapCancel">确定</a-button>
            </template>
            <mapVue :position="[jwData.j, jwData.w]"></mapVue>
        </a-modal>
    </div>
</template>


<script setup >
import { ref, onMounted, reactive } from 'vue'
import { DownOutlined, UpOutlined, SwapRightOutlined } from '@ant-design/icons-vue';
import mapVue from '../../../components/map.vue';
import { useUserData } from '../../../stores/userData';
import { useRouter } from 'vue-router';
import share from '../../../util/commnet'
import { message } from 'ant-design-vue';
import { ordergAPI } from '../../../api/management'
import { geoAPi, regeoAPi } from '../../../api/map';
import { debounce } from 'lodash'
const store = useUserData()     //pinia用户数据
const router = useRouter();

const totalCount = ref(0);      //总条
const pageSize = ref(10);       //一页多少条
const current = ref(1);         //当前页

const expand = ref(false);  //查询部分是否展示更多
const formRef = ref();
const formState = reactive({
    username: '',
    userphone: '',
    date: [],
    techphone: '',
    usernickname: '',
    state: '',
    project: [],
    techname: ''
});
const columns = [{   //表格头部
    title: '订单号',
    dataIndex: 'uid',
    key: 'uid',
    fixed: 'left',
}, {
    title: '用户昵称',
    dataIndex: 'nickname',
    key: 'nickname',
    fixed: 'left',

}, {
    title: '用户姓名',
    dataIndex: 'address_name',
    key: 'address_name',
}, {
    title: '用户手机号',
    dataIndex: 'user_phone',
    key: 'user_phone',
},
{
    title: '技师名称',
    dataIndex: 'name',
    key: 'name',
},
{
    title: '技师手机号',
    dataIndex: 'tech_phone',
    key: 'tech_phone',
},
{
    title: '订单时间',
    dataIndex: 'date_time',
    key: 'date_time',
},
{
    title: '订单金额',
    dataIndex: "total",
    key: "total",
},
{
    title: '订单时长（分钟）',
    dataIndex: "duration",
    key: "duration",
},
{
    title: '订单状态',
    dataIndex: "state",
    key: "state",
},
];
const formCo = [  //查询头部
    {
        title: '用户昵称',
        dataIndex: 'nickname',
        key: 'nickname',
        fixed: 'left',

    }, {
        title: '用户姓名',
        dataIndex: 'address_name',
        key: 'address_name',
    }, {
        title: '用户手机号',
        dataIndex: 'user_phone',
        key: 'user_phone',
    },
    {
        title: '技师名称',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '技师手机号',
        dataIndex: 'tech_phone',
        key: 'tech_phone',
    },
    {
        title: '订单时间',
        dataIndex: 'date_time',
        key: 'date_time',
    },
    {
        title: '订单状态',
        dataIndex: "state",
        key: "state",
    },
]
const data = ref([]);  //表格数据内容

const onFinish = (i) => {
    if (i == true) {  //bug  重置无效
        formState.username = '',
            formState.userphone = '',
            formState.date = [];
        formState.techphone = '';
        formState.usernickname = '';
        formState.project = [];
        formState.techname = '';
        formState.state = ''
    }
    pageClick()
}

const ordergMoal = ref(false);
const orderData = reactive({
    data: {},
    clock: [],
    pro: [],
    reporting: [],
});


// 点击单条数据
const handleRowClick = async (item) => {

    let res = await ordergAPI(`selectDan|${item.uid}|${store.data.token}|${store.data.uuid}|${store.data.phone}`);
    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        console.log(res);
        message.error(res.message);
        return
    }
    console.log(res);
    if (res.data) {
        orderData.clock = res.clock;   //加钟项目
        orderData.clock =res.clock? share.clockArray(res.clock): null;
        console.log(orderData.clock);
        orderData.data = res.data && res.data[0];           //个人信息
        orderData.pro = res.project;                //服务项目
        orderData.reporting = res.reporting;   //报备信息
        ordergMoal.value = true;

        let regeo_start = await regeoAPi(orderData.data.ot_start_longitude, orderData.data.ot_start_latitude);  //起始位置
        let regeo_end = await regeoAPi(orderData.data.ot_target_longitude, orderData.data.ot_target_latitude);  //结束位置
        let geo = await geoAPi(orderData.data.address_address)
        console.log(regeo_start);
        jwData.pro = geo.geocodes[0].province;                 //获取省区
        jwData.trave_start = regeo_start.regeocode.addressComponent.township   //获取起始位置
        jwData.trave_end = regeo_end.regeocode.addressComponent.township        //获取结束位置
    } else {
        message.error('查询不到数据')
    }


}
// 点击经纬度
const jwData = reactive({
    j: '',
    w: '',
    pro: '',
    trave_start: '',
    trave_end: ''
})

const maps = (j, w) => {
    jwData.j = j;
    jwData.w = w;
    mapShow.value = true;

}
// 服务信息表
const fwColumns = [
    {
        title: "项目标题",
        dataIndex: "project_name",
        key: "project_name"
    },
    {
        title: "服务时长 (分)",
        dataIndex: "project_time",
        key: "project_time"
    },
    {
        title: "项目说明",
        dataIndex: "illustrate",
        key: "illustrate",
        width: 400
    },
    {
        title: "单价",
        dataIndex: 'project_price',
        key: "project_price"
    },
    {
        title: "小计 (元)",
        dataIndex: "project_subtotal",
        key: "project_subtotal"
    }
]
// 加钟列表
const jzColumns = [
    {
        title: "项目标题",
        dataIndex: "clock_project_name",
    },
    {
        title: "加钟总时长 (分)",
        dataIndex: "clock_project_time"
    },
    {
        title: "加钟价格 (元)",
        dataIndex: 'clock_amount'
    },
    {
        title: "是否支付",
        dataIndex: "clock_state"
    }
]
//报备表
const reColumns = [
    {
        title: "报备状态",
        dataIndex: "orderg_state",
    },
    {
        title: "报备原因",
        dataIndex: "reason"
    },
    {
        title: "报备详情",
        dataIndex: 'notes',
        ellipsis: true,
    },
    {
        title: "报备图片",
        dataIndex: "image",
    },
    {
        title: "报备日期",
        dataIndex: "reporting_date"
    }
]
// 订单详情取消
const ordergCancel = () => {
    ordergMoal.value = false;
}
const mapShow = ref(false);

const mapCancel = () => {
    mapShow.value = false;
}


const debouncePageClick = debounce(async(item)=>{           //进行防抖
    item ? current.value = item.current : current.value = 1;
    let res = await ordergAPI(`sel|${formState.date}|${formState.userphone}|${formState.usernickname}|${formState.username}|${formState.techname}|${formState.techphone}|${formState.state}||${pageSize.value}|${current.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)  //下单时间，user电话，昵称，地址user名字，技师名称，技师电话，状态，商品 多少一页，多少页
    console.log(res);
    if (!res) {                //验证账号状态
        router.replace({ name: 'login' });
        message.error("账号失效", 3)
        return;
    }
    data.value = res.data;
    totalCount.value = res.total;
},300)

const pageClick = async (item) => {   //点击表格的操作
    debouncePageClick(item);
}

onMounted(async () => {
    let res = await ordergAPI(`sel||${formState.userphone}|${formState.usernickname}|${formState.username}|${formState.techname}|${formState.techphone}|${formState.state}||${pageSize.value}|${current.value}|${store.data.token}|${store.data.uuid}|${store.data.phone}`)  //下单时间，user电话，昵称，地址user名字，技师名称，技师电话，状态，商品 多少一页，多少页
    if (!res || res.code == 406) {
        message.error("账号失效");
        router.replace({ name: 'login' });
        return;
    } else if (res.code != 200) {
        message.error(res.message);
        return
    }

    totalCount.value = res.total;
    data.value = res.data;

})

</script>

<style scoped src="../../css/management/orderg.scss" />




